<!DOCTYPE html>
<html lang="zxx">

<head>
	<title>关于我们</title>
	<!-- Meta tag Keywords -->
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- //Meta tag Keywords -->
	<script src="js/jquery-1.8.3.min.js"></script>
	<style type="text/css">
		.ermenga{
			background-image: linear-gradient( 225deg, #FFA8A8 10%, #FCFF00 100%);
			color: transparent !important;
			-webkit-background-clip: text;
		}
		.jisi{
			background-image: linear-gradient( 135deg, #F0FF00 10%, #58CFFB 100%);
			color: transparent !important;
			-webkit-background-clip: text;
		}
		.bl_ue{
			background-image: linear-gradient( 180deg, #52E5E7 10%, #130CB7 100%);
			color: transparent !important;
			-webkit-background-clip: text;
		}
		*{margin:0px;padding:0px;}
		body{background:#000;}
		/* music */
		.music {
			height: 150px;
			width: 300px;
			top:25px;
			background: url(images/music-bg.jpg);
			background-size:100% 100%;
			color: white;
		}
		.pic_div {
			position: relative;
		}
		.dot {
			width: 15px;
			height: 15px;
			background: #464545;
			position: absolute;
			border: 2px solid white;
			border-radius: 50%;
			top: 67px;
			left: 88px;
		}
		.disc {
			width: 100px;
			top:25px;
			position: absolute;
			right: 155px;
			transform: rotate(30deg);
		}
		#music_pic {
			width: 100px;
			top:25px;
			position: absolute;
		}
		.music_program {
			height: 2px;
			width: 100px;
			background: #555;
			position: relative;
			top: 125px;
		}
		.music_program div {
			height: 100%;
			width: 0%;
			background: red;
		}
		.time {
			width: 100px;
			height: 20px;
			left: 155px;
			position: relative;
			top: 48px;
			overflow: hide;
		}
		.time p {
			padding-left: 30px;
			color: white;
		}
		.time p span:nth-of-type(2) {
			padding: 0 5px;
			color: white;
		}
		.music_menu {
			width: 150px;
			height: 25px;
			left: 167px;
			position: relative;
			top: 52px;
		}
		.music_menu span {
			width: 30px;
			height: 25px;
			display: inline-block;
			cursor: pointer;
		}
		.music_menu span:nth-of-type(1) {
			margin-left: 8px;
		}
		.music_menu span:nth-of-type(2) {
			margin-left: 14px;
		}
		.music_menu span:nth-of-type(3) {
			margin-left: 14px;
		}
		.animate {
			width: 40px;
			height: 20px;
			left: 170px;
			position: relative;
			top: 35px;
			color: white;
			display: inline-block;
			white-space: nowrap;
			animation: 5s wordsLoop linear infinite normal;
		}
		@keyframes wordsLoop {
			0% {
				transform: translateX(100%);
				-webkit-transform: translateX(100%);
			}
			100% {
				transform: translateX(-100%);
				-webkit-transform: translateX(-100%);
			}
		}
		@-webkit-keyframes wordsLoop {
			0% {
				transform: translateX(100%);
				-webkit-transform: translateX(100%);
			}
			100% {
				transform: translateX(-100%);
				-webkit-transform: translateX(-100%);
			}
		}
	</style>

	
	<!-- Icon -->
	<link rel="icon" href="images/logo-f.png" sizes="64x64">
	<!-- Custom-Files -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- Bootstrap-Core-CSS -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //Custom-Files -->

	<!-- Web-Fonts -->
	<link rel="stylesheet" href="css/fonts.googleapis.com.css">
	<!-- //Web-Fonts -->
</head>

<body>
	<!-- 看板娘 -->
	<script src="assets/jquery.min.js?v=3.3.1"></script>
	<script src="assets/jquery-ui.min.js?v=1.12.1"></script>
	<script src="assets/autoload.js"></script>
	<!-- //看板娘 -->
	<div class="container-fix" id = "fix_music" style="bottom: 5px;left: 0px;width: 300px;">
		<audio src="" id="mymusic"></audio>
		<div class="music" style="overflow:hidden;">
			<div class="pic_div">
				<img src="images/disc.png" style="pointer-events:none;" alt="" class="disc"><img src="images/default.png" alt="" id="music_pic">
				<span class="dot" style="pointer-events:none;"></span>
				<div class="music_program" style="pointer-events:none;">
					<div id="prograss"></div>
				</div>
				<p class="animate" id="music_name"></p>
				<div class="time" style="pointer-events:none;">
					<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p>
				</div>
				<div class="music_menu"><span class="fa fa-backward" onClick="backMusic()"></span><span id="pau" onClick="playPause()" class="fa fa-play" id="playbtn"></span><span onClick="nextMusic()" class="fa fa-forward"></span></div>
			</div>
		</div>
	</div>
	<!-- main banner  style="position:fixed;top:0;"-->
	<div class="main-top" id="home">
		<!-- header -->
		<header>
			<div class="container-fix">
				<div class="header d-lg-flex justify-content-between align-items-center py-3 px-sm-3">
					<!-- logo -->
					<div id="logo">
						<h1><a href="index.html"><img src="images/logo.png" alt="" class="img-fluid" />云旗</a></h1>
					</div>
					<!-- //logo -->
					<!-- 导航  -->
					<div class="nav_w3ls">
						<nav>
							<label for="drop" class="toggle">菜单</label>
							<input type="checkbox" id="drop" />
							<ul class="menu">
								<li><a href="index.html">主页</a></li>
								<li><a href="about.html" class="active"><strong>关于我们</strong></a></li>
								<li><a href="tool.html">小工具</a></li>
								<li>
									<!-- First Tier Drop Down -->
									<label for="drop-2" class="toggle toogle-2">导航 <span class="fa fa-angle-down" aria-hidden="true"></span>
									</label>
									<a href="#">导航 <span class="fa fa-angle-down" aria-hidden="true"></span></a>
									<input type="checkbox" id="drop-2" />
									<ul>
										<li><a href="slr.html" class="drop-text">线性回归</a></li>
										<li><a href="knn.html" class="drop-text">K近邻算法</a></li>
										<li><a href="dt.html" class="drop-text">决策树</a></li>
										<li><a href="faq.html" class="drop-text">常见问题</a></li>
										<li><a href="#partners" class="drop-text">合作伙伴</a></li>
										<li><a href="#team" class="drop-text">我们的团队</a></li>
									</ul>
								</li>
								<li><a href="contact.html">联系我们</a></li>
							</ul>
						</nav>
					</div>
					<!-- //导航 -->
					<div class="d-flex mt-lg-1 mt-sm-2 mt-3 justify-content-center">
						<!-- 搜索 -->
						<div class="search-w3layouts mr-3">
							<form action="#" method="post" class="search-bottom-wthree d-flex">
								<input class="search" type="search" placeholder="站内搜索..." required="">
								<button class="form-control btn" type="submit"><span class="fa fa-search"></span></button>
							</form>
						</div>
						<!-- //搜索 -->
					</div>
				</div>
			</div>
		</header>
		<!-- //header -->

		<!-- banner -->
		<div class="banner_w3lspvt-2">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="index.html">主页</a></li>
				<li class="breadcrumb-item" aria-current="page">关于我们</li>
			</ol>
		</div>
		<!-- //banner -->
	</div>
	<!-- //main banner -->

	<!-- 关于 -->
	<div class="about-inner py-5">
		<div class="container pb-xl-5 pb-lg-3">
			<div class="row py-xl-4">
				<div class="col-lg-5 about-right-faq pr-5">
					<h6>我们的故事</h6>
					<h3 class="mt-2 mb-3">第一个网站</h3>
					<p class="text-sty-banner">&emsp;&emsp;一群秃头程序员不知为何聚集在了一起，决定开发一个能帮助大家理解算法的网站。<br />&emsp;&emsp;我们都来自大连理工大学软件学院！</p>
					&emsp;&emsp;<a href="https://baike.baidu.com/item/%E5%A4%A7%E8%BF%9E%E7%90%86%E5%B7%A5%E5%A4%A7%E5%AD%A6%E8%BD%AF%E4%BB%B6%E5%AD%A6%E9%99%A2" class="btn button-style" target="_blank">了解一下</a>
				</div>
				<div class="col-lg-7 welcome-right text-center mt-lg-0 mt-5">
					<img src="images/dlut.jpg" width="80%" alt="糟糕，图片加载不出来了。" title="DLUT" class="img-fluid" style="margin-top: 3em;"/>
				</div>
			</div>
		</div>
	</div>
	<!-- //关于 -->

	<!-- stats -->
	<section class="bottom-count py-5" id="stats">
		<div class="container py-xl-5 py-lg-3">
			<div class="row">
				<div class="col-lg-5 left-img-w3ls">
					<img src="images/view0.jpg" alt="糟糕，图片加载不出来了。" class="img-fluid" />
				</div>
				<div class="col-lg-5 about-right-faq pr-5" style="margin-left: 6em;">
					<div class="bott-w3ls">
						<h6>我们的特点</h6>
						<h3 class="title-w3 text-bl mb-3 font-weight-bold">可视化平台</h3>
						<p class="text-sty-banner">&emsp;&emsp;可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。<br />&emsp;&emsp;为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //stats -->

	<!-- 团队 -->
	<section class="team bg-li py-5" id="team">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="tittle text-center font-weight-bold"><img src="images/logo.png" alt="糟糕，图片加载不出来了。" class="img-fluid">云旗</h3>
			<p class="sub-tittle text-center mt-3 mb-sm-5 mb-4">我们的三人小团队</p>
			<div class="row ab-info second pt-lg-4">
				<div class="col-lg-4 col-sm-6 ab-content text-center mt-lg-0 mt-4">
					<div class="ab-content-inner">
						<img src="images/k1.png" alt="糟糕，图片加载不出来了。" class="img-fluid">
						<div class="ab-info-con">
							<h4 class="ermenga text-team-w3">二萌啊</h4>
							<p>前端开发</p>
							<p>后台开发</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-sm-6 ab-content text-center mt-lg-0 mt-4">
					<div class="ab-content-inner">
						<img src="images/k3.png" alt="糟糕，图片加载不出来了。" class="img-fluid">
						<div class="ab-info-con">
							<h4 class="text-team-w3">BL丿<span class="bl_ue">藍</span>丨UE</h4>
							<p>算法分析</p>
							<p>需求模拟</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-sm-6 ab-content text-center mt-lg-0 mt-4">
					<div class="ab-content-inner">
						<img src="images/k3.jpg" alt="糟糕，图片加载不出来了。" class="img-fluid">
						<div class="ab-info-con">
							<h4 class="text-team-w3 jisi">微笑fla</h4>
							<p>算法分析</p>
							<p>需求模拟</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //团队 -->

	<!-- 内容参考 -->
	<section class="partners py-5" id="partners">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="tittle text-center font-weight-bold">内容参考</h3>
			<div style="width:100%;text-align:center;margin: 6em 0em 12em 0em;">
				<div style="position: absolute;left: 20%;width: 10%;">
					<div class="parts-w3ls">
						<a href="https://fontawesome.dashgame.com/" target="view_window"><span class="fa fa-flag"></span></a>
						<h4>Font Awesome</h4>
					</div>
				</div>
				<div style="position: absolute;left: 30%;width: 10%;">
					<div class="parts-w3ls">
						<a href="https://www.mathjax.org/" target="view_window"><img src="images/mathjax.ico" /></a>
						<h4>MathJax</h4>
					</div>
				</div>
				<div style="position: absolute;left: 40%;width: 10%;">
					<div class="parts-w3ls">
						<a href="https://www.fghrsh.net/post/123.html" target="view_window"><img src="images/live2d.png" width="48px"/></a>
						<h4>Live2D</h4>
					</div>
				</div>
				<div style="position: absolute;left: 50%;width: 10%;">
					<div class="parts-w3ls">
						<a href="https://zh.numberempire.com/" target="view_window"><img src="images/pi-ball.png" width="48px"/></a>
						<h4>数字帝国</h4>
					</div>
				</div>
				<div style="position: absolute;left: 60%;width: 10%;">
					<div class="parts-w3ls">
						<a href="http://www.turingapi.com/" target="view_window"><img src="images/turing.png" height="48px" /></a>
						<h4>图灵机器人</h4>
					</div>
				</div>
				<div style="position: absolute;left: 70%;width: 10%;">
					<div class="parts-w3ls">
						<a href="https://blog.csdn.net/weixin_39141044/article/details/83013416" target="view_window"><img src="images/csdn.ico" height="48px" /></a>
						<h4>Canvas绘图基础</h4>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //内容参考 -->

	<!-- footer -->
	<footer class="bg-li py-5">
		<div class="container py-xl-5 py-lg-3">
			<!-- 订阅 -->
			<div class="subscribe mx-auto">
				<div class="icon-effect-w3">
					<span class="fa fa-envelope"></span>
				</div>
				<h2 class="tittle text-center font-weight-bold">持续更新中!</h2>
				<p class="sub-tittle text-center mt-3 mb-sm-5 mb-4">更多的可视化板块正在不断筹备中<br />请耐心等待...</p>
				<form action="succeed.html" method="" class="subscribe-wthree pt-2">
					<div class="d-flex subscribe-wthree-field">
						<input class="form-control" type="email" placeholder="输入你的邮箱..." name="email" required="">
						<button class="btn form-control w-50" type="submit">订阅</button>
					</div>
				</form>
			</div>
			<!-- //订阅 -->
		</div>
	</footer>
	<!-- //footer -->
	<!-- copyright bottom -->
	<div class="copy-bottom bg-li py-4 border-top">
		<div class="container-fluid">
			<div class="d-md-flex px-md-3 position-relative text-center">
				<!-- footer social icons -->
				<div class="social-icons-footer mb-md-0 mb-3">
				</div>
				<!-- //footer social icons -->
				<!-- copyright -->
				<div class="copy_right mx-md-auto mb-md-0 mb-3">
					<p class="text-bl let">Copyright &copy; 2020.Company name All rights reserved.</p>
				</div>
				<!-- //copyright -->
				<!-- 返回顶部 -->
				<a href="#home" class="move-top text-center">
					<span class="fa fa-level-up" aria-hidden="true"></span>
				</a>
				<!-- //返回顶部 -->
			</div>
		</div>
	</div>
	<!-- //copyright bottom -->
	<script type="text/javascript">
	var music=document.getElementById("mymusic");
	var prograss=document.getElementById("prograss");
	var curtxt=document.getElementById("currenttime");
	var duration=document.getElementById("duration");
	var music_pic=document.getElementById("music_pic");
	var deg=0;//旋转角度
	var disctimer,prograsstimer;//碟片计时器,进度条计时器
	var musicindex=0;//音乐索引
	var musics=new Array("440353010.mp3","437909145.mp3","31010566.mp3","1330348068.mp3","505449407.mp3","2698075.mp3","4209157.mp3","1328047738.mp3");//音乐数组
	var music_pics=new Array("http://p2.music.126.net/znZQMUXniXqwjJrXMJO_Qg==/109951163100026676.jpg","http://p2.music.126.net/uVgFabWFqhprOAA-bsfJ9A==/18795051766390200.jpg","http://p2.music.126.net/UR8jAfqus_o1j_QkaYkZ_g==/109951163664241365.jpg","http://p2.music.126.net/diGAyEmpymX8G7JcnElncQ==/109951163699673355.jpg","http://p1.music.126.net/ejBqv__hHneHWQnMd1x00A==/18338754440252475.jpg","http://p2.music.126.net/YH6nJglutuszMIqpNL8wwQ==/18265087161186511.jpg","http://p2.music.126.net/TK4eehKaatnOgvkUFW8AkQ==/1743825441666319.jpg","http://p1.music.126.net/-8DMwO-O-93cZ1D8CQ-mIw==/109951163699364002.jpg");
	var names=new Array("#Lov3 #Ngẫu Hứng","By Your Side","Sold Out","起风了","Friendships (Original Mix)","Ce Frumoasa E Iubirea","She Is My Sin","Different World");
	var disc=document.getElementsByClassName('disc');
	function curtime(txt,misic)//音乐时间显示
	{
		if(music.currentTime<10) {
			txt.innerHTML="0:0"+ Math.floor(music.currentTime);
		}else if(music.currentTime<60) {
			txt.innerHTML="0:"+ Math.floor(music.currentTime);
		} else {
			var minet=parseInt(music.currentTime/60);
			var sec=music.currentTime-minet*60;
			if(sec<10) {
				txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);
			} else {
				txt.innerHTML="0"+minet+":"+parseInt(sec);
			}
		}
	}
	//播放暂停
	function playPause()
	{
		var btn=document.getElementById("playbtn");
		if(music.paused)
		{
			music.play();
			clearInterval(disctimer);//清除碟片的定时器
			document.getElementById('pau').className = 'fa fa-pause';//改变播放暂停键的图标
			disctimer=setInterval(function(){
				disc[0].style.transform="rotate("+deg+"deg)";
				deg+=5;
				//每秒设置进度条长度
			},100);
			prograsstimer=setInterval(function(){
				prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
				curtime(curtxt,music);
				if(music.currentTime >= music.duration-1)//片尾跳转下一曲
				{
					musicindex++;//音乐索引加一
					if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零
					{
						musicindex=0;
					}
					getMusic();
					music.play();//重载音乐后进行播放
				}
			},1000);
		} else {
			music.pause();//停止音乐
			document.getElementById('pau').className = 'fa fa-play';//改变图标
			clearInterval(disctimer);//清除碟片滚动的定时器
			clearInterval(prograsstimer);//清除进度条的定时器
		}
	}
	//下一曲
	function nextMusic()
	{
		musicindex++;//音乐索引加一
		if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零
		{
			musicindex=0;
		}
		getMusic();
		music.play();
		document.getElementById('pau').className = 'fa fa-pause';//改变播放暂停键的图标
		document.getElementById('music_name').innerHTML = names[musicindex];
	}
	//上一曲
	function backMusic()
	{
		musicindex--;
		if(musicindex<0)//如果索引小于0，将索引变为最大值
		{
			musicindex=musics.length-1;
		}
		getMusic();
		music.play();
		document.getElementById('pau').className = 'fa fa-pause';//改变播放暂停键的图标
		document.getElementById('music_name').innerHTML = names[musicindex];
	}
	//读取音乐
	function getMusic()
	{
		music.src="http://music.163.com/song/media/outer/url?id="+musics[musicindex];//改变音乐的SRC
		music_pic.src=music_pics[musicindex];
		document.getElementById('music_name').innerHTML = names[musicindex];
		if(music.readyState="complete") {
			setTimeout(function(){
			duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
			},1000);//一秒后读取音乐的总时长
		}
	}
	window.onload=function(){
		getMusic();
	}
</script>
</body>

</html>